<template>
  <div>
    <nav
      style="
        height: 0.44rem;
        position: fixed;
        z-index: 999;
        top: 0;
        background:white;
        max-width: 407px;
        width: 100%;
      "
    >
      <van-tabs v-model="active" @click="tabclick">
        <van-tab
          v-for="(item, index) in list"
          :key="index + ''"
          :title="item.label"
        ></van-tab>
      </van-tabs>
    </nav>
    <van-list
      v-show="!zan_pd"
      style="margin-top: 0.44rem"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(items, indexs) in lists"
        :key="indexs"
        @click="dj(items.id)"
      >
        <van-row>
          <van-col span="3">
            <van-image
              width=".3rem"
              height=".3rem"
              :src="items.author.avatar_url"
          /></van-col>
          <van-col
            span="16"
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >{{ items.title }}
            <p style="font-size: 0.12rem">
              {{ items.reply_count }}/{{ items.visit_count }}
            </p></van-col
          >
          <van-col span="4"> {{ items.last_reply_at | relativeTime }}</van-col>
        </van-row>
      </van-cell>
    </van-list>
    <div v-show="zan_pd" class="zan">暂无数据</div>
  </div>
</template>

<script>
import Vue from "vue";
import { List } from "vant";
import { Image as VanImage } from "vant";
import { Col, Row } from "vant";
Vue.use(Col);
Vue.use(Row);
Vue.use(VanImage);
Vue.use(List);
export default {
  created() {
    this.$store
      .dispatch(
        "axiostopics",
        this.$route.query.tab ? this.$route.query.tab : "all"
      )
      .then((res) => {
        if (res) {
          this.topics = this.$store.state.zhuzhu.topics;
          this.onLoad();
        }
      });
  },
  mounted() {
   
    this.list.forEach((v, k) => {
      if (v.tab == this.$route.query.tab) {
        this.active = k;
      }
    });
    
    // 解决 list页面, 不存在的参数,加入暂无数据
    let num =0;
    let tab = this.$route.query.tab;
    if(!tab) return false
    this.list.forEach((v,k)=>{
      if(tab !== v.tab){
        num++
      }
    })
    if(num==this.list.length){
      this.zan_pd=true
      this.loading=false
    }

  },
  data() {
    return {
      active: 0, //默认显示
      qingqiu: false,
      jiazai: true,
      lists: [],
      topics:[],
      loading: false,
      finished: false,
      zan_pd: false,
      list: [
        {
          label: "全部",
          tab: "all",
        },
        {
          label: "精华",
          tab: "ask",
        },
        {
          label: "分享",
          tab: "share",
        },
        {
          label: "问答",
          tab: "job",
        },
        {
          label: "招聘",
          tab: "good",
        },
        {
          label: "dev",
          tab: "dev",
        },
      ],
    };
  },
  methods: {
    tabclick(name, title) {
      this.zan_pd = false;
      // console.log(this.$route.params);
      this.loading = true;
      this.finished = false;
      // 防止重复跳转路由 请求ajax
      if(this.$route.query.tab == this.list[name].tab) return
      this.$router.push({
        name: "homelist",
        query: { tab: this.list[name].tab },
      });
      this.$store
        .dispatch("axiostopics", "" + this.list[name].tab)
        .then((res) => {
          this.topics = this.$store.state.zhuzhu.topics;
          this.lists = [];
          this.onLoad();
        });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.lists.push(this.topics[i]);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.lists.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    dj(val) {
      this.$router.push({
        name: "detail",
        query: { tab: val },
      });
    },
  },
};
</script>

<style  scoped>
/* a{
  font-size: .44rem;
} */
.zan {
  margin-top: 0.44rem;
  font-size: 0.16rem;
  text-align: center;
  padding-top: 0.2rem;
  line-height: 0.4rem;
}
</style>
  
